{extends file="backend/index.tpl"} 

{block name="page-content"}
{literal}
<script type="text/javascript">
$(document).ready(function() {
	
	$('input[name="name"]').blur(function() {
		var name = $('input[name="name"]').val();
		$.ajax({
			type: "GET",
			url: "/truyen/admin/ajax/checkChapterUname",
			cache: false,
			data: { name: name },
			success: function(res){
				$('#uName').val(res);	
			}
		});
	});
	
	$('input[name="no"]').blur(function() {
		var no = $('input[name="no"]').val();
		var bookID = $('select[name="book_id"]').val();
		var volume = $('select[name="volume_no"]').val();
		$.ajax({
			type: "GET",
			url: "/truyen/admin/ajax/checkChapterNo",
			cache: false,
			data: { no: no, bookID: bookID, volume: volume },
			success: function(res){
				//console.log(res);
				if (res === '1'){
					$('#uniqueNo').css({"border-color": "red"});
				} else {
					$('#uniqueNo').css({"border-color": "#CCC"});
				}		
			}
		});
	});

	$('select[name="book_id"]').change(function () {
         var bookID = $('#bookID').val();
         $("#volume_no > option").remove();
         console.log(bookID);
         $.ajax({   
        	 type: "POST", 
             url: "/truyen/admin/ajax/getVolumeByBookID",
             cache: false, 
             data: { bookID: bookID},
             success: function(volumes) {
            	 console.log(volumes);
            	$.each(volumes,function(no,name){
            		var opt = $('<option />');
            		opt.val(no);
            		opt.text('Quyển '+no+' : '+name);
            		$('#volume_no').append(opt);
            	});
            }
         });
     });
});          
</script>
{/literal}
<form id="validate" class="addGame" method="POST" action="{$base_url}admin/add-chapter.html">
	<div class="row-fluid">
		<div class="span6">
			<div class="block">
				<div class="head">
					<h2>Thêm Chương Mới</h2>
					<ul class="buttons">
						<li><a href="#" onclick="source('form_default'); return false;">
								<div class="icon">
									<span class="ico-info"></span>
								</div> </a>
						</li>
					</ul>
				</div>
				<div class="data-fluid">
					<div class="row-form">
						<div class="span3">Name</div>
						<div class="span9">
							<input type="text" class="validate[required]" name="name" /> <span
								class="bottom">Required</span>
						</div>
					</div>
					<div class="row-form">
						<div class="span3">Book Name</div>
						<div class="span9">
							<select id="bookID" name="book_id" class="select" style="width: 100%;">
								<option value="0">Nhớ Chọn Nha !!!</option>
								{foreach from=$listBook item=book}
								<option value="{$book.book_id}">{$book.book_name}</option>
								{/foreach}
							</select>
						</div>
					</div>
					<div class="row-form">
						<div class="span3">No(Chương)</div>
						<div class="span9">
							<input type="text" class="validate[required]" id="uniqueNo" name="no" /> 
							<span class="bottom" style='color:red'>Nhớ Chọn Book Name và Volume(Nếu Có) Trước Nha!</span>
						</div>
					</div>
					
					<div class="row-form">
						<div class="span3">Page Description</div>
						<div class="span9">
							<textarea name="page_description"
								placeholder="Placeholder example" class="validate[required]"></textarea>
						</div>
					</div>
					<div class="row-form">
						<div class="span3">Description</div>
						<div class="span9">
							<textarea name="description" placeholder="Placeholder example"
								class="validate[required]" style="height: 300px !important"></textarea>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="span6">
			<div class="block">
				<div class="head">
					<h2></h2>
					<ul class="buttons">
						<li><a href="#" onclick="source('form_pa'); return false;">
								<div class="icon">
									<span class="ico-info"></span>
								</div> </a>
						</li>
					</ul>
				</div>
				<div class="data-fluid">
					<div class="row-form">
						<div class="span3">Unique Name</div>
						<div class="span9">
							<input type="text" class="validate[required]" id="uName" name="uname" /> <span
								class="bottom">Required</span>
						</div>
					</div>
					
					<div class="row-form">
						<div class="span3">Volume</div>
						<div class="span9">
							<select id="volume_no" name="volume_no" class="select" style="width: 100%;">
								<option value="0">Nếu Có. Nhớ Chọn Nha !!!</option>
								
								<!-- {foreach from=$listVolume item=volume}
									<option value="{$volume.volume_no}">{$volume.volume_no} - {$volume.volume_name}</option> 
								{/foreach} -->
							</select>
							<span class="bottom" style='color:red'>Nhớ Chọn Book Name (Nếu Có) Trước Nha!</span>
						</div>
					</div>
					<div class="row-form">
						<div class="span3">Page Title</div>
						<div class="span9">
							<input type="text" id="pageTitle" name="page_title" />
						</div>
					</div>
					<div class="row-form">
						<div class="span3">Page Keyword</div>
						<div class="span9">
							<input name="page_keyword" type="text" class="tags" />
						</div>
					</div>
					<div class="row-form">
						<div class="span3">Open</div>
						<div class="span9">
							<select name="open" class="select" style="width: 100%;">
								<option value="Y">Yes</option>
								<option value="N">No</option>
								<option value="P">PC</option>
								<option value="M">Mobile</option>
							</select>
						</div>
					</div>
					<div class="row-form">
						<div class="span3">Mobile Description</div>
						<div class="span9">
							<textarea name="mob_description"
								placeholder="Có Thể để rỗng nha!!!"
								style="height: 300px !important"></textarea>
						</div>
					</div>
					<div class="toolbar bottom tar">
						<div class="btn-group">
							<button class="btn btn-info" type="button"
								onClick="$('#validate').validationEngine('hide');">Ẩn Thông Báo</button>
							<button class="btn" type="submit" name="submit" id="addBook">Thêm Chương Mới</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</form>
{/block}

